<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :default-config="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        v-model="html"
        style="min-height: 300px; overflow-y: hidden"
        :default-config="editorConfig"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'EditorVue',
  components: { Editor, Toolbar },
  props: {
    content: {
      type: String,
      default: ''
    },
    readOnlys: { // 只读
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        /* 显示哪些菜单，如何排序、分组 */
        toolbarKeys: [
          'headerSelect',
          // '|',
          'bold',
          'underline',
          'italic',
          'color',
          'bgColor',
          // '|',
          'indent', // 增加缩进
          'delIndent', // 减少缩进
          'justifyLeft', // 左对齐
          'justifyRight', // 右对齐
          'justifyCenter', // 居中
          'justifyJustify', // 两端对齐
          // '|',
          'fontSize',
          'fontFamily',
          'lineHeight',
          // '|',
          'bulletedList',
          'numberedList',
          'todo',
          'insertLink',
          'insertTable',
          // '|',
          'codeBlock',
          'divider',
          'uploadImage',
          'undo',
          'redo'
        ]
        // excludeKeys: [ ], /* 隐藏哪些菜单 */
      },
      editorConfig: {
        placeholder: '请输入内容',
        // autoFocus: false,
        // readOnly: true, // 只读、不可编辑
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.uploaadImg
          }
        }
      }
    }
  },
  watch: {
    // 监听是否有数据传递给来
    content: {
      handler(newTent) {
        if (newTent) {
          this.html = newTent
        } else {
          this.html = ''
        }
      },
      immediate: true
    },
    readOnlys: {
      handler(newV) {
        if (newV) {
          this.editor.disable() // 只读模式
        }
      }
    }
  },
  created() {
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁 editor
  },
  methods: {
    uploaadImg(file, insertFn) {
      console.log(file)
      console.log(insertFn)
      this.$emit('uploadImg', file, insertFn)
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    // 获取最新的html数据
    onChange(editor) {
      this.$emit('changeData', this.html)
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
